<template>
    <div class="index" style="margin-top: 20px">
        <div>
            <span style="margin-bottom: 10px;margin-top: 10px;margin-left: 20px">
                结算统计:
            </span>
                   <span class="content-header">
                    已结算: <span class="importInfo">{{ priceChange(money.total) }}</span>
                </span>
                <span class="content-header">
                    待结算: <span class="importInfo">{{ priceChange(money.other) }}</span>
                </span>
        </div>
        <div class="body-content">

            <div class="body-content-info">
                <H3 style="margin-bottom: 10px;margin-top: 10px;">
                    银行卡信息:
                </H3>
                <div class="table-data-box">
                    <el-table
                        ref="bank"
                        v-loading="bankLoading"
                        :data="bankData"
                        border
                        style="width: 100%;min-height:40em"
                        row-key="id"
                    >
                        <el-table-column
                            prop="bankName"
                            label="银行名称"
                            min-width="100"
                        ></el-table-column>
                        <el-table-column
                            prop="bankCard"
                            label="卡号"
                            min-width="100"
                        ></el-table-column>
                        <el-table-column
                            prop="bankUserName"
                            label="收款人"
                            min-width="100"
                        ></el-table-column>
                    </el-table>
                </div>
            </div>
            <div class="body-content-info">
                <H3 style="margin-bottom: 10px;margin-top: 10px;">
                    课程信息:
                </H3>
                <div class="table-data-box">
                    <el-table
                        ref="table"
                        v-loading="tableLoading"
                        :data="tableData"
                        border
                        style="width: 100%;min-height:40em"
                        row-key="id"
                    >
                        <el-table-column
                            prop="courseName"
                            label="课程名称"
                            min-width="100"
                        ></el-table-column>
                        <el-table-column
                            prop="classficationName"
                            label="学科"
                            min-width="100"
                        ></el-table-column>
                        <el-table-column
                            prop="presentPrice"
                            label="售卖价格"
                            min-width="100"
                        >
                            <template slot-scope="scope">
                                {{ priceChange(scope.row.presentPrice) }}
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="agentPrice"
                            label="代理商价格"
                            min-width="100"
                        >
                            <template slot-scope="scope">
                                {{ priceChange(scope.row.agentPrice) }}
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="agentDiscount"
                            label="代理提成"
                            min-width="100"
                        >
                            <template slot-scope="scope">
                                <span v-if="!scope.row.edit">{{ scope.row.agentDiscount }}</span>
                                <el-input
                                    v-if="scope.row.edit"
                                    v-model="scope.row.agentDiscount"
                                ></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="selfDiscount"
                            label="自营提成"
                            min-width="100"
                        >
                            <template slot-scope="scope">
                                <span v-if="!scope.row.edit">{{ scope.row.selfDiscount }}</span>
                                <el-input
                                    v-if="scope.row.edit"
                                    v-model="scope.row.selfDiscount"
                                ></el-input>
                            </template>
                        </el-table-column>
                    </el-table>

                </div>
                <div v-if="pageData.total > 0" class="xy-between table-page-box">
                    <el-pagination
                        background
                        :current-page.sync="pageData.currentPage"
                        :page-sizes="pageData.pageSizes"
                        :page-size.sync="pageData.pageSize"
                        layout="total,  prev, pager, next, sizes, jumper"
                        :total="pageData.total"
                    >
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {VuePage, TablePage} from "@/layout/mixin/iVue";
import {mapState} from "vuex";
import {getUserBankList, getUserCount, getUserLine} from "@/api/user";
import {get} from "@/api/request";

export default {
    name: "TeacherIndex",
    mixins: [VuePage, TablePage],
    props: {
        userId: {
            type: String,
            default: null
        }
    },
    data() {
        return {
            value2: null,
            format: {
                dateTimeFormat: "yyyy-MM-dd HH:mm:ss",
                dateFormat: "yyyy-MM-dd",
                monthFormat: "yyyy-MM",
                yearFormat: "yyyy"
            },
            dataList: {
                adminData: {
                    chartLoding: false,
                    myChart: null,
                    countUrl: "/user/cu/user/index-count",
                    url: "/user/cu/user/index-line",
                    userNum: {
                        total: 0,
                        todayNew: 0,
                    },
                    queryData: {
                        timeType: "daterange",
                        timeDate: null,
                    },
                    echartsModel: {
                        tooltip: {},
                        xAxis: {
                            name: "日期",
                            data: []
                        },
                        yAxis: {},
                        series: [{
                            name: "数量",
                            type: "line",
                            data: []
                        }]
                    }
                },
            },
            tableLoading: false,
            tableData: [],
            bankLoading: false,
            bankData: [],
            orgOptions: {},
            queryData: {
                userId: this.userId,
                type: "chargeCourse",
                teacherId: this.userId,
                showToday:false,
            },
            money:{
                total: 0,
                other: 0,
            }

        }
    },
    computed: {},
    created() {
        this.getBankList();
        this.getMoney();
    },
    mounted() {
        // this.init();
    },
    methods: {
        priceChange(number) {
            const bs = number / 100;
            return bs.toFixed(2) + "元";
        },
        getMoney(){
            get("/order/or/settlement/index-count",this.queryData).then(res => {
                this.money = res;
            })
        },
        search() {

            if (!this.queryData.teacherId) {
                return;
            }
            if (this.queryData.time && this.queryData.time.length === 2) {
                this.queryData.startTime = this.queryData.time[0];
                this.queryData.endTime = this.queryData.time[1];
            }
            this.loadTable("/course/teacher/re/teacher-course-page", this.initQueryData);
        },
        dataTypeChange(index) {
            this.dataList[index].queryData.timeDate = this.dataList[index].queryData.timeDate = this.getNow(this.dataList[index].queryData.timeType);
            this.getData(index);
        },
        dateTimeHandler(index) {
            let timeDate = this.dataList[index].queryData.timeDate;
            let timeType = this.dataList[index].queryData.timeType;
            if (!timeDate) {
                this.dataList[index].queryData.timeDate = this.getNow(timeType);
                timeDate = this.dataList[index].queryData.timeDate;
            }


            if ("daterange" === timeType) {
                this.dataList[index].queryData.startTime = timeDate[0].format(this.format.dateFormat) + " 00:00:00"
                this.dataList[index].queryData.endTime = timeDate[1].format(this.format.dateFormat) + " 23:59:59"
            } else if ("month" === timeType) {
                let currMonth = new Date(timeDate);
                currMonth.setMonth(timeDate.getMonth() + 1)
                currMonth.setDate(1);
                currMonth.setHours(0, 0, 0);
                currMonth.setSeconds(currMonth.getSeconds() - 1);
                this.dataList[index].queryData.endTime = currMonth.format(this.format.dateTimeFormat);
                currMonth.setDate(1);
                currMonth.setHours(0, 0, 0);
                this.dataList[index].queryData.startTime = currMonth.format(this.format.dateTimeFormat);
            } else if ("year" === timeType) {
                let currYear = new Date(timeDate);
                currYear.setMonth(11);
                currYear.setDate(31);
                currYear.setHours(23, 59, 59);
                this.dataList[index].queryData.endTime = currYear.format(this.format.dateTimeFormat);
                currYear.setMonth(0);
                currYear.setDate(1);
                currYear.setHours(0, 0, 0);
                this.dataList[index].queryData.startTime = currYear.format(this.format.dateTimeFormat);

            }


        },
        dateIntervalHandler(index) {

            //计算开始和终止日期之间的日期
            this.dataList[index].echartsModel.xAxis.data = [];
            let endTime = new Date(this.dataList[index].queryData.endTime);
            let startTime = new Date(this.dataList[index].queryData.startTime);
            let timeType = this.dataList[index].queryData.timeType;

            switch (timeType) {
            case "daterange":
                this.dataList[index].echartsModel.xAxis.data.push(startTime.format(this.format.dateFormat));
                let currentDate_d;
                while ((currentDate_d = new Date(startTime.setDate(startTime.getDate() + 1))) < endTime - 1) {
                    this.dataList[index].echartsModel.xAxis.data.push(currentDate_d.format(this.format.dateFormat))
                }
                break;
            case "month":
                this.dataList[index].echartsModel.xAxis.data.push(startTime.format(this.format.dateFormat));
                let currentDate_m;
                while ((currentDate_m = new Date(startTime.setDate(startTime.getDate() + 1))) <= endTime - 1) {
                    this.dataList[index].echartsModel.xAxis.data.push(currentDate_m.format(this.format.dateFormat))
                }
                break;
            case "year":
                this.dataList[index].echartsModel.xAxis.data.push(startTime.format(this.format.monthFormat));
                let currentDate_y;
                endTime.setDate(1);
                endTime.setHours(0, 0, 0);
                while ((currentDate_y = new Date(startTime.setMonth(startTime.getMonth() + 1))) < endTime) {
                    this.dataList[index].echartsModel.xAxis.data.push(currentDate_y.format(this.format.monthFormat))
                }
                break;
            default:
                break;
            }
        },
        getData(index) {
            this.dataList[index].chartLoding = true;
            this.dateTimeHandler(index);
            this.dateIntervalHandler(index);
            get(this.dataList[index].url, this.dataList[index].queryData).then(res => {
                let tmpx = this.dataList[index].echartsModel.xAxis.data;
                let tmpy = [];
                for (let j = 0, len = tmpx.length; j < len; j++) {
                    let value = tmpx[j];
                    if (null !== res && res[value] !== null && res[value] !== undefined) {
                        tmpy[j] = res[value]
                    } else {
                        tmpy[j] = 0;
                    }
                }
                this.dataList[index].echartsModel.series[0].data = tmpy;
                this.dataList[index].myChart.setOption(this.dataList[index].echartsModel);
                this.dataList[index].chartLoding = false;
            }).catch(() => {
                this.dataList[index].chartLoding = false;
            })
        },
        getNum(index) {
            get(this.dataList[index].countUrl).then(res => {
                this.dataList[index].userNum = res;
            })

        },
        getNow(timeType) {
            if ("daterange" === timeType) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);

                return [start, end];
            } else if ("month" === timeType) {
                const end = new Date();
                end.setDate(0);
                end.setHours(0, 0, 0)
                return end;
            } else if ("year" === timeType) {
                const end = new Date();
                return end;
            }

        },
        getBankList() {
            if (!this.queryData.userId) {
                return;
            }
            this.bankLoading = true;
            getUserBankList({...this.queryData,size:1000}).then(res => {
                this.bankData = res || [];
            }).finally(() => {
                this.bankLoading = false;
            })
        },
        init() {
            this.getBankList();
        },
        initEcharts(index) {
            this.dataList[index].myChart = this.$echarts.init(document.getElementById(index))
            this.getData(index);
        },
        clickSearch(index) {
            this.getData(index);
        },
    }
};
</script>
<style lang="scss" scoped>
.head-title {
    margin-left: 20px;
    margin-top: 10px;
    font-size: 20px;
}

.body-content {
    margin-left: 20px;
    margin-top: 10px;
    font-size: 18px;
    flex-wrap: wrap;
    width: 100%;
    display: inline-flex;
}

.body-content-header {
    margin-left: 20px;
    font-weight: bolder;
    color: red
}

.importInfo {
    font-weight: bolder;
}

.body-content-info {
    margin-top: 20px;
    width: 50%;
    border: 1px solid #f1f1f1;
    padding-bottom: 1em;
    padding-left: 1em;

}

.echartClass {
    width: 100%;
    height: 350px;
}

.timeType {
    min-width: 3em;
}

.search-item label {
    min-width: 2em;
}

.content-header {
    margin-right: 30px;
}
</style>
